<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>host css样式测试</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!--ie渲染引擎-->
    <!--忽略电话号码和email识别-->
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <!--当网站添加到主屏幕快速启动方式，将网站添加到主屏幕快速启动方式-->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!--隐藏ios上的浏览器地址栏-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!-- UC默认竖屏 ，UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <meta name="browsermode" content="application">
    <!-- QQ强制竖屏 QQ强制全屏 -->
    <meta name="x5-orientation" content="portrait">
    <meta name="x5-fullscreen" content="true">
    <meta name="x5-page-mode" content="app">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    
  </head>
  <body>
<style>
  div {
    font-size: 25px;
    text-transform: uppercase;
    color: red;
  }
</style>
 
<div><p>Light DOM</p></div>
<div id="host"></div>


<script>
//参考文档 https://developer.mozilla.org/zh-CN/docs/Web/CSS/:host()
  const elem = document.querySelector('#host');
  const shadowRoot = elem.attachShadow({mode: 'open'});
 
  //shadowRoot.innerHTML = `<p>Shadow DOM</p>`;//字体样式穿透
  //使外部样式不起作用
  shadowRoot.innerHTML = `<p>Shadow DOM</p>
	  <style>
      :host p {
        all: initial;
      }
    </style>
  
  `;
</script>

</body>
</html>
